<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">  
<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>信工院积分管理系统-首页</title>
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/normalize.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/demo.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/static/css/index.css}"/>
		<style>
			.container-width{
		   		 max-width: 400px;
		    }
		    .form-group{
		    	margin: 10px auto;
		    }
		    .form{
		    	margin-top: 40px;
		    }
		    .label{
		   		 color: #777;
		    	font-size: 12px;
		    }
		</style>
		<link rel="icon" th:href="@{/static/img/logo.ico}" type="image/x-icon"/>		
	</head>
	<body>
		<div class="header">
			<div class="h-info">
				<span><a href="javascript:void(0)" class="meun"><i class="glyphicon glyphicon-menu-hamburger"></i></a><a href="#" onclick="window.location.reload();"><i class="glyphicon glyphicon-refresh"></i></a></span>
				<span class="s2 hidden-xs">积分管理系统</span>
			</div>
			<div class="p-info">
				<span><a data-toggle="modal" data-target="#UpdateMail"><i class="glyphicon glyphicon-envelope"></i></a></span>
				<span class="s1"><a><span th:if="${session.tourists.role == 'tourists'}">学生会成员</span><i class="glyphicon glyphicon-menu-down"></i></a><img th:src="@{/static/pic/{picture}(picture=${session.tourists.pic})}" alt="学生会成员头像" class="hidden-xs"/></span>
				<span class="s3"><a th:href="@{/base/logOff.do?role=${session.tourists.role}}" onclick="if(confirm('确定要退出么？')==false)return false;"><i class="glyphicon glyphicon-off"></i></a></span>
				<div class="info">
					<ul class="dropdown dropdown-menu" role="menu">
						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#selectUserModal" class="fir">个人资料</a></li>
						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#updatePasswordModal" class="sec">修改密码</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="left">
				<div class="l-header hidden-xs">
					<div class="myimg">
						<img th:src="@{/static/pic/{picture}(picture=${session.tourists.pic})}" alt="管理员头像" width="54px" height="54px"/>
					</div>
					<div class="p-group">
						<span>Welcome</span><br />
						<sapn th:text="${session.tourists.name}"></sapn><br />
						<span class="unique">状态：<span>在线</span></span>
					</div>
					
				</div>
				<div class="l-body">
					<div class="list-body">
						<ul class="nav nav-pills nav-stacked navbar-brand">						
							<li><a th:href="@{/integral/integralList.do}"  target="right"><i class="glyphicon glyphicon-dashboard"></i><span>&nbsp;&nbsp;查看积分</span></a></li>
							<li><a href="../welcome.html"   target="right"><i class="glyphicon glyphicon-th"></i><span>&nbsp;&nbsp;友情提示</a></span></li>
							<li><a th:href="@{/sort/sort.do}"   target="right"><i class="glyphicon glyphicon-th"></i><span>&nbsp;&nbsp;学生端</a></span></li>
						</ul>
					</div>
				</div>
			</div>
		<div class="right"> 
			<iframe id="usermessage-content-frame" src="../welcome.html" name="right" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"></iframe>
		</div>
		</div>
		
    <div class="modal fade" id="selectUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4  class="modal-title">个人资料</h4>
			</div>
			<div class="modal-body">
				<div class="container container-width">
				       <form class="form-horizontal " role="form">
							<div class="form-group">
								<label for="firstname" class="col-sm-3 control-label">学号</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="num" th:value="${session.tourists.studentId}" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-3 control-label">姓名</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="name" th:value="${session.tourists.name}" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-3 control-label">部室</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="name" th:value="${session.tourists.clubroom}" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-3 control-label">邮箱</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="email_select_input" th:value="${session.tourists.email}"  readonly="readonly">
								</div>
							</div>
						</form>
				   </div>
			</div>
			<div class="modal-footer">
				
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="updatePasswordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改密码
				</h4>
			</div>
			<div class="modal-body">
				<div class="container container-width">
					<div class="title">
						<h2>
							<small>按照提示输入信息</small>
						</h2>
					</div>
				       <form class="form-horizontal " role="form">
							<div class="form-group">
								<label for="firstname" class="col-sm-3 control-label">旧密码</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="endPassword">
								    <span class="help-block"></span>
									<input type="hidden" class="form-control" id="endPassword2" th:value="${session.tourists.password}">
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-3 control-label">新密码</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="password1" >
									<span class="help-block"></span>
								</div>
							</div>
							<div class="form-group">
								<label for="lastname" class="col-sm-3 control-label">再次输入</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="password2">
									<span class="help-block"></span>
								</div>
							</div>
						</form>
				   </div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary" id="password_update_btn">
					修改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

		<script type="text/javascript" th:src="@{/static/js/jquery.min.js}"></script>
		<script type="text/javascript" th:src="@{/static/js/jquery.md5.js}"></script>
		<script type="text/javascript" th:src="@{/static/js/bootstrap.min.js}"></script>	
		<script type="text/javascript">
			
		
		   $('.s1>a').click(function(){
				$('.info').toggle();
				$('.dropdown').toggle();
			});
			$('.p-info').bind("selectstart",function(){ return false;});
			
			$(".fir , .sec ").click(function(){
				$(".info").css("display","none");
				$(".info ul").css("display","none");
			});
			
			$('.meun').click(function(){
				var bool = $('.l-body').width()<200;
				if(bool){
					$('.l-body').toggle();
				}
				
			});
			$(".list-body ul li a").click(function(){
				var bool = $('.l-body').width()<200;
				if(bool){
					$('.l-body').css("display","none");
				}
			})
			
			$("#usermessage-content-frame").load(function() {
			 var iframeHeight = $(this).contents().find("html").height();
			 $(this).height(iframeHeight);
			 });
			
			
		</script>
		<script type="text/javascript">
		
			//原密码验证
			$("#endPassword").change(function() {			
				var endPassword = this.value;
				var endPassword2= $("#endPassword2").val(); 	
				var str=$.md5(endPassword).substring(4, 12);			
				
				if(endPassword.length>16){
				   show_validate_msg("#endPassword", "error", "密码长度必须小于16位");
			       return false;
			    } 
			    
				if(str!= endPassword2){
					//应该清空这个元素之前的样式
					show_validate_msg("#endPassword", "error", "原密码输入错误");
					return false;
				}else{
					show_validate_msg("#endPassword", "success", "原密码验证成功,请输入新密码");
				};
			});
			
			
			$("#password1").change(function() {			
                var password1= this.value; 	
				
				if(endPassword.length>16){
				   show_validate_msg("#password1", "error", "密码长度必须小于16位");
			       return false;
			    }else{
				   show_validate_msg("#password1", "success", "请再次输入新密码");
				}
			});
			
			
			$("#password2").change(function() {			
				var password2 = this.value;
				if(password2.length>16){
				   show_validate_msg("#password2", "error", "密码长度必须小于16位");
			       return false;
			    }
			});
			
		
		$("#password_update_btn").click(function(){ 		   		
		   
		   var password1= $("#password1").val(); 		
		   var password2= $("#password2").val(); 
		   var email= $("#email_select_input").val(); 
        
		   //简单验证
		   if(password1 == null || password1 == ''  || password2 == null || password2 == ''){
		        alert("密码不能为空");  
		   }else if(password2!= password1){
				//应该清空这个元素之前的样式
				show_validate_msg("#password2", "error", "前后两次输入的密码不相同");
				return false;
		   }else{
			 var password=$.md5(password1).substring(4, 12);
		      //修改密码
		      $.ajax({
				url : "updatePassword.do",
				data : {"password":password,"toMail":email},
				type : "POST",
				success : function(result) {
				    if (result.code == 200) {
				       alert("密码修改成功,请重新登录");
			           document.location = "login_index.do";
					}
				 } 
		      });  
			};
		});  
	   
	   
	   //显示校验结果的提示信息
		function show_validate_msg(ele, status, msg) {
			//清除当前元素的校验状态
			$(ele).parent().removeClass("has-success has-error");
			$(ele).next("span").text("");
			
			if ("success" == status) {
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			} else if ("error" == status) {
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
	   
		</script>
	</body>
</html>